﻿@model CTM.Web.Models.View.Conversation.ConversationViewModel

@{
    ViewBag.Title = "Edit Conversation";
    Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/_Layout.cshtml";
}

@if (!Request.IsAjaxRequest())
{
    <h2>Edit Conversation</h2>
}

@using (Ajax.BeginForm("Edit", "Conversation",
                    null,
                    new AjaxOptions { HttpMethod = "POST", OnSuccess = "OnEditConversationSuccess" },
                    new { @class = "form-horizontal", id = "edit-conversation-form" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @*<h4>Conversation</h4>
            <hr />*@
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)
        @Html.HiddenFor(model => model.ManagerId)

        <div class="form-group">
            @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control", rows = 5, cols = 30 } })
                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Emoticon, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-rbvh btn-success @(Model.Emoticon == CTM.Web.Utils.Emoticon.Smile ? "active" : "")">
                        @Html.RadioButtonFor(model => model.Emoticon, CTM.Web.Utils.Emoticon.Smile)
                        <span class="fa fa-lg fa-smile-o"></span>
                    </label>
                    <label class="btn btn-rbvh btn-warning @(Model.Emoticon == CTM.Web.Utils.Emoticon.Neutral ? "active" : "")">
                        @Html.RadioButtonFor(model => model.Emoticon, CTM.Web.Utils.Emoticon.Neutral)
                        <span class="fa fa-lg fa-meh-o"></span>
                    </label>
                    <label class="btn btn-rbvh btn-danger @(Model.Emoticon == CTM.Web.Utils.Emoticon.Frown ? "active" : "")">
                        @Html.RadioButtonFor(model => model.Emoticon, CTM.Web.Utils.Emoticon.Frown)
                        <span class="fa fa-lg fa-frown-o"></span>
                    </label>
                </div>
                @Html.ValidationMessageFor(model => model.Emoticon, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Type, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-rbvh grey-darkgrey @(Model.Type == CTM.Web.Utils.PostType.Goals ? "active" : "")">
                        @Html.RadioButtonFor(model => model.Type, CTM.Web.Utils.PostType.Goals) Goals
                    </label>
                    <label class="btn btn-rbvh blue-aqua @(Model.Type == CTM.Web.Utils.PostType.Career ? "active" : "")">
                        @Html.RadioButtonFor(model => model.Type, CTM.Web.Utils.PostType.Career) Career
                    </label>
                    <label class="btn btn-rbvh red-bittersweet @(Model.Type == CTM.Web.Utils.PostType.Individual ? "active" : "")">
                        @Html.RadioButtonFor(model => model.Type, CTM.Web.Utils.PostType.Individual) Individual
                    </label>
                </div>
                @Html.ValidationMessageFor(model => model.Type, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Tags, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input type="hidden" value="@string.Join(",", Model.Tags.Select(t => t.Name))" id="HiddenConversationTags" />
                <input id="ConversationTags" name="Tags" class="form-control" type="text" data-role="tagsinput" />
            </div>
        </div>

        @if (ViewBag.IsManager == false)
        {
            <div class="form-group">
                @Html.LabelFor(model => model.ManagerId, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10" id="manager-search-box">
                    <input type="hidden" value="@Model.Manager.DisplayName" id="HiddenManagerDisplayName" />
                    @Html.EditorFor(model => model.ManagerId, new { htmlAttributes = new { @class = "form-control typeahead" } })
                    @Html.ValidationMessageFor(model => model.ManagerId, "", new { @class = "text-danger" })
                </div>
            </div>
        }

        @if (!Request.IsAjaxRequest())
        {
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Save" class="btn btn-default" />
                </div>
            </div>
        }
    </div>
}

<script>
    function OnEditConversationSuccess(data) {
        //Successful requests get here. Update the page elements
        $('#EditConversationModal').modal('hide');
        location.reload();
    }
</script>

@section scripts {
    <script>
        $(function () {

            // constructs the suggestion engine
            var managers = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.whitespace,
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: '@Url.Action("SearchManagers", "Home")' + '?q=%QUERY',
                    wildcard: '%QUERY',
                }
            });

            $('#manager-search-box .typeahead').typeahead({
                hint: true,
                highlight: true,
                minLength: 1
            },
            {
                name: 'managers',
                display: 'DisplayName',
                limit: 10,
                source: managers,
                templates: {
                    notFound: [
                      '<div class="empty-message">',
                        'unable to find any manager that match the current query',
                      '</div>'
                    ].join('\n'),
                    suggestion: function (data) { // data is an object as returned by suggestion engine
                        return '<p>' + data.DisplayName + '</p>';
                    }
                }
            });

            $('#manager-search-box .typeahead').bind('typeahead:select', function (ev, suggestion) {
                $('#ManagerId').val(suggestion.Id);
            });

            // Necessary scripts for Bootstrap Tags Input
            var tags = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: '@Url.Action("Tags", "Home")' + '?name=%QUERY',
                    wildcard: '%QUERY',
                    filter: function (list) {
                        return $.map(list, function (tag) {
                            return { name: tag };
                        });
                    }
                }
            });
            tags.initialize();

            $('#ConversationTags').tagsinput({
                typeaheadjs: {
                    name: 'tags',
                    displayKey: 'name',
                    valueKey: 'name',
                    source: tags.ttAdapter()
                }
            });

            // load manager
            var managerNameHiddenInput = $('#HiddenManagerDisplayName');
            $('#manager-search-box .typeahead').typeahead('val', managerNameHiddenInput.val());

            // load current tags
            $('#ConversationTags').tagsinput('removeAll');

            var tagHiddenInput = $('#HiddenConversationTags');
            var currentTags = tagHiddenInput.val().split(',');
            for (var i = 0; i < currentTags.length; i++) {
                if (currentTags[i] !== '') {
                    $('#ConversationTags').tagsinput('add', currentTags[i]);
                }
            }

        });
    </script>
}